<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .cbox{
            border: 1px solid #999;
            padding: 20px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <comp-a></comp-a>
    <p>{{ msg }}</p>
    <hr>
    <div id="app">
        <h4>局部组件</h4>
        <ul>
            <li>配置 components 选项完成局部组件的定义描述</li>
            <li>
                定义时的属性名为组件名称(自定义标签名) <br>
                为了规避和HTML元素的名称冲突，vue建议组件名以多个单词方式组成 <br>
                在JS语法下定义组件名称时可以使用大驼峰或连字符方式进行组件标签名称的描述 <br>
                模板页面中大驼峰需要转换为连字符规则进行标签定义 <br>
            </li>
            <li>
                定义时的属性取值为组件的相关配置，配置等同于createVNode的配置,<br>
                定义的组件以自定义标签名调用的形式在页面展示 <br>
                基于vue组件语法构建的，以自定义标签方式调用的vue实例，只能是在其它已经运行的vue实例容器中被加载
            </li>
        </ul>
        <h4>组件定义的模板属性template取值</h4>
        <ul>
            <li>取值字符串类型的标签格式文本</li>
            <li>取值CSS选择器，指向为HTML页面中的template标签包裹内容作为模板内容</li>
            <li>取值CSS选择器，指向HTML页面中 type=text/x-template 取值的script标签定义的内部模板内容</li>
        </ul>
        <h4>组件具有独立的运行环境，和独立数据功能控制</h4>
        <p>msg:{{ msg }}</p>
        <hr>
        <!-- 自定义vue组件标签的标签调用方式，就是组件调用的模板语法 -->
        <!-- 
            一个已运行的vue实例容器中出现自定义标签，
            vue以自定义标签名加载对应的组件配置，
            基于配置调用 createVNode 方法创建虚拟DOM，
            基于虚拟DOM调用render 函数完成真实DOM构建渲染,
            通过节点替换方法将 创建组件DOM替换到组件自定义标签所描述的位置,
            并完成定义在组件自定义标签上的其它vue指令语法的运行
        -->
        <comp-a v-for="item in 2"></comp-a>
        <hr>
        <!-- html页面不识别大小写 -->
        <!-- <compB></compB> -->
        <comp-b></comp-b>
        <comp-b></comp-b>
        <hr>
        <comp-c></comp-c>
        <hr>
        <comp-d></comp-d>
    </div>

    <template id="CompC">
        <div class="cbox">
            <p>组件CompC</p>
        </div>
    </template>

    <script type="text/x-template" id="CompD">
        <div class="cbox">
            <p>组件CompD</p>
        </div>
    </script>


    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    msg:"createApp-msg"
                }
            },
            components: {
                "comp-a":{
                    template:`
                        <div class="cbox">
                            <p>组件CompA</p>
                            <p>msg:{{ msg }}</p>
                            <input type="text" v-model="msg">
                        </div>
                    `,
                    data() {
                        return {
                            msg: "CompA数据"
                        }
                    },
                },
                CompB:{
                    template:`
                        <div class="cbox">
                            <p>组件CompB</p>
                        </div>
                    `
                },
                CompC:{
                    template:"#CompC"
                },
                CompD:{
                    template:"#CompD"
                }
            },
        }).mount("#app")
    </script>
</body>
</html>